<template>
	<div class="view-detail-item">
		<div
			v-if="showLabel"
			class="view-detail-label"
			:style="{
				width: labelWidth || data.labelWidth,
				padding: `0 ${data.gutter / 2}px`
			}"
		>
			<slot name="label">{{ label }}</slot>
		</div>
		<div class="view-detail-content">
			<slot :data="data" :value="data[prop]">
				{{ data[prop] }}
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: '',
		// inject: ['viewDetail'],
		props: {
			label: {
				type: String,
				default: ''
			},
			prop: {
				type: String,
				default: ''
			},
			showLabel: {
				type: Boolean,
				default: true
			},
			labelWidth: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default: () => {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-detail-item {
		display: flex;
		padding: 8px 0;
		line-height: 1.5;

		p {
			margin: 0;
		}

		.view-detail-label {
			word-break: break-all;
			color: #303133;
		}

		.view-detail-content {
			flex: 1;
			word-break: break-all;
			color: #606266;
		}
	}
</style>
